<template>
  <div>
    <div>
      <!-- 头部 -->
      <van-nav-bar class="title_bgc" title="分类"> </van-nav-bar>
      <!-- 搜索 -->
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        to="/search"
        icon="search"
        >商品搜索 共{{ goodsCounts }}款好物</van-button
      >
      <div style="display: flex">
        <!-- 侧边导航 -->
        <div style="width: 20%">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item
              v-for="item in catalogList"
              :key="item.id"
              icon="photo-o"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <!-- 右边内容 -->
        <div style="width: 80%">
          <!-- <keep-alive></keep-alive> -->
          <van-image class="info-imp" :src="currentCategory.banner_url" />
          <!-- 宫格导航 -->
          <div
            style="
              display: flex;
              justify-content: space-around;
              flex-direction: column;
              margin: 0 11px;
            "
          >
            <div
              style="
                margin-top: 10px;
                margin-bottom: 10px;
                color: #3d3d3e;
                font-size: 16px;
                text-align: center;
              "
            >
              {{ currentCategory.name }}
            </div>
            <div>
              <van-grid :column-num="3">
                <van-grid-item
                  v-for="item in subCategoryList"
                  :key="item.id"
                  :to="'/goods/' + item.id"
                >
                  <template slot="icon">
                    <img :src="item.banner_url" alt="" />
                  </template>
                  <template slot="text">
                    {{ item.name }}
                  </template>
                </van-grid-item>
              </van-grid>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goodsCounts, catalogList, getContent } from "@/api/yangyang/Classify";
export default {
  name: "Classify",
  data() {
    return {
      activeKey: 0,
      goodsCounts: "", // 商品数量
      catalogList: [], //导航列表
      currentCategory: {},
      subCategoryList: [],
    };
  },
  created() {
    this.getGoodsCounts();
    this.getCatalogList();
  },
  methods: {
    // 获取右侧内容数据
    async onChange() {
      let res = await getContent(this.catalogList[this.activeKey].id);
      this.currentCategory = res.data.data.currentCategory;
      this.subCategoryList = res.data.data.currentCategory.subCategoryList;
    },

    // 获取商品ID

    // 获取商品数量
    async getGoodsCounts() {
      let res = await goodsCounts();
      this.goodsCounts = res.data.data.goodsCount;
    },
    //  获取左侧导航列表
    async getCatalogList() {
      let res = await catalogList();
      this.catalogList = res.data.data.categoryList;
      this.currentCategory = res.data.data.currentCategory;
      this.subCategoryList = res.data.data.currentCategory.subCategoryList;
      console.log(this.subCategoryList);

      // console.log(this.subCategoryList);
    },
  },
};
</script>
<style lang="less" scoped>
.title_bgc {
  background-color: red;
  color: #fff;
}
#mine /deep/ .van-nav-bar__title {
  color: #fff !important;
}
.search-btn {
  width: 90% !important;
  margin-top: 10px !important;
  color: #666 !important;

  margin-left: 48px !important;
  background-color: #ededed;
  border: 1px solid #ededed !important;
}
.info-imp {
  width: 80% !important;
  height: 160px !important;

  margin-left: 54px !important;
  margin-top: 22px;
}
</style>
